<template>
  <div class="container">
    <!--<fileList @deleteList='(lisd)=>deleteList(lisd,i)' :options="{title:'name',url:'files'}" :list='file'></fileList>-->
    <div class="teachingPlanTag mar">
        <div class="courseWareList marginB10" v-for="(file,i)  in info.fileList" :key="i">
        <el-button  type="success" size="mini" round  class="closeBorder_ fr"  @click="deleteList(file,i)" >删除课件</el-button>
        <div class="listFilebox">
      <fileList @deleteList='(lisd)=>delFile(lisd)'
      :options="{title:'name',url:'files',edit:true}"
      :list='file'></fileList>

        </div>
         <outerBox title="文件标签" >
         <!--<el-button type='text' icon="el-icon-close" class="pad fr"  @clcik="deleteList(lisd,i)"/>-->

       <yes-tags @editTagList='editTagList' :tagsList.sync="file.tagList" :id="file.id" @delCanback='delCanback' />
      <el-button type="primary" size="medium" round @click="open(i)">添加标签</el-button>
      </outerBox>
      </div>
    </div>

    <div class="marginT15 ov">
      <!-- <UploadPicFile class="fl" :limit='1' style="width:280px" type="file" @uploadSuccess="uploadTemplateSuccess" /> -->
      <div class="templateContentVOListBox ov">
         <!-- <UploadPicFile class="fl" :options="{'show-list':false,' show-file-list':false}" style="width:280px" type="file" @uploadSuccess="uploadSuccess" /> -->
     <el-button @click="indDialog">上传文件</el-button>
     </div>

     <el-dialog :visible.sync="courseDialog" :close-on-click-modal="false">
          <UploadPicFile
          type="file"
          class="t-center courseDialogUpload marginBtm"
          :options="{'show-file-list':false,
          'text':null,
          'btnType':'text',
          'icon':'el-icon-circle-plus-outline',

          }"
           @uploadSuccess="indUploadSuccess">
           </UploadPicFile>
          <!-- 视频 -->
          <!-- <div v-show="info.indList.files&&filesAsync" class="files-error warning" >请上传课件文件</div> -->
          <fileList
          v-if="courseDialog"
          :options="{url:'files','show-file-list':true,progress:{progressStatus:true}}"
          :list='info.indList' />
         <!-- <video v-if="getFileCate(info.indList.url)"  :src="info.indList.url" style="height:300px;"  controls="controls">
            {{ info.indList.url }}
          </video> -->
          <yes-tags @editTagList='editTagList' :tagsList.sync="info.indList.tagList" @delCanback='delCanback' />
          <el-button type="primary" size="medium" round @click="open()">添加标签</el-button>
          <div slot="footer" class="dialog-footer t-left">
            <el-button @click="courseDialog=false">取 消</el-button>
            <el-button type="primary" @click="next(true)">确 定</el-button>
          </div>
     </el-dialog>


      <tag-dialog :list="dialogObj" :tagsList="info.indList.tagsList" :checkedVal.sync='checkedVal'
       :checkKeynote="checkKeynote"  :checkAbilityArr="checkAbilityArr"
       :ByPMapperList.sync="ByPMapperList"
        :importTagsList.sync="importTagsList" :dialogVisible.sync="dialogVisible" @changeImportCheckBox="changeImportCheckBox"
		:growthClassify="getClassfiyArr"
        @Callback="dialogCallback" />
      </div>
    <div class="footer-group margin30">
      <!-- <el-button type="info" @click="save">
        保存
      </el-button> -->
    </div>
  </div>
</template>

<script>
  import yesTags from './yesTags'
  import outerBox from '@/components/outerBox'
  import TagDialog from './tagDialog'
  import fileList from './fileList'
  import UploadPicFile from '@/components/UploadPicFile'
  import editor from '@/components/Tinymce/index';
  import editClassTimeTabsMixin from './Mixin'
  import {
    saveResCourseware
  } from '@/api/createResult'
  import {
    findImportTagsList,
    findByPMapper,
    addContentTags
  } from '@/api/tags'
  import {
    mapMutations
  } from 'vuex'
  export default {
    name: 'Courseware',
    components: {
      yesTags,
      outerBox,
      fileList,
      UploadPicFile,
      TagDialog
    },
    mixins:[editClassTimeTabsMixin],
    data() {
      return {
        tagList: [],
        progressStatus:true,
        courseDialog:false,
        hrefUrl:'',
        actFileId:0,
        filesAsync:false,
        info:{
          fileList:[],
          indList:{id:'',files:'',title:'',tagList:[],progress:{progressStatus:true}}
        },
        indexResList:{},
        checkKeynote:[],
        checkAbilityArr:[],
        templatePlatform:{},
        hideHref:false,
        resType: 'TEACHING', //教案
        keynote: [],
        abilityArr: [],
        activeMode: '',
        ByPMapperList: [], //能力提升
        importTagsList: [],
        checkedVal: null,
        dialogVisible: false,
        content: '',
        isPush:false,
        improvementTagList: [],
        keyPointTagList: [],
        findStr:'-*',
        sysList: [], //系统推荐标签
        dialogObj: {
          growthClassify: null,
          stageId: null,
          subjectId: null,
          tagsGroupEnum: null
        }
      }
    },
    mounted(){
     if(this.list.length){
       //此处判断为：当编辑状态下有回选标签重点内容的时候 提前获取到所有的重点内容方便后面的修改标签
       this.getFindImportTags()
     }
    },
    created() {
      var tes = this
      console.log("courseware", tes)
      // this.dialogObj = {
      //   GROWTH_CLASSIFY: '',
      //   STAGE: '',
      //   SUBJECT: '',
      //   DOWNSTATUS: true
      // };
     //this.indexResList =
      this.fetchData(this.list)
    },
    watch:{
      courseDialog(val){
        if(val){
          this.info.indList ={tagList:[]}
        }
       // this.isPush = false
      },
      list(val){
        if(!this.isPush){
         // this.indexResList = val
          this.fetchData(val)
        }
        //this.isPush = false
      }
    },
    props:{
    list:{
      type:[Object,Array],
    	default:[]
      },
    teachingDesignResId:{
      default:'',
    },
    },
    computed: {
      getClassfiyArr(){
        return this.$store.state.uploadLessonPlan.getClassfiyArr
      },
      fileIds(){
        var fileIdStr=''

        this.info.fileList.map((item,i,items)=>{
          if(item.files){
            fileIdStr += (fileIdStr&&i<items.length-1?',':'')+item.files
              console.log("）",i,items.length-1,fileIdStr,item)
          }

        })
         return fileIdStr
      }
    },
    methods: {
       deleteList({id},i){
        this.info.fileList.splice(i,1)
        this.$ajax({
          url:'/personPrepareLesson/deleteResCourseware',
          method:'delete',
          params:{resCoursewareId:id,teachingDesignResId:this.teachingDesignResId}
        }).then((res)=>{
        })
      },
      fetchData(val){

        let {indexResList,info,idGetTagList,$set} = this
        if(val){
          if(Array.isArray(val)&&val.length){
            val.forEach((lists,i)=>{
              info.fileList.push({...lists,tagList:idGetTagList(lists.tagList)})
            })

          }else{
            info.fileList = []
          }
           indexResList = val
        }
     },
    dialogCallback(obj) {
      var tagList = this.courseDialog? this.info['indList'].tagList:this.info.fileList[this.actFileId].tagList
      //obj.val 编辑或者添加选择的值
      console.log('dialogCallback:', obj);
      this.dialogVisible = obj.dialogVisible;
      let tagGroudArr = obj.val //{keynote:obj.keynote,abilityArr:obj.abilityArr}
      var falog = false
      tagList.map((item, j, k) => {
        for (var kn in item) {
          if (JSON.stringify(tagGroudArr).indexOf(kn) > -1) {
            falog = {
              j,
              k:kn
            }
          }
        }
      })
      //编辑,添加
      if (!obj.edit && !falog) {
        //this.tagList.push(tagGroudArr)
         //this.$set(tagList,this.actFileId,tagGroudArr)
        tagList.push(tagGroudArr)

      } else {
        var {
          j,
          k
        } = obj.edit ? obj.edit : falog
        var that = this
        //this.info.fileList[this.actFileId].tagsList.push(tagGroudArr)
      // tagGroudArr = obj.val[k]
         this.$set(tagList[j], k, obj.val[k])
      }
     if(!this.courseDialog) this.save({tagList:tagList})
    },
      open(ind) {
        console.log(this.dialogVisible);
        this.dialogVisible = true;
        this.actFileId = ind
        this.getFindImportTags()
      },
      indUploadSuccess({res,file,that}){
         this.$set(this.info.indList,'files',that.info.filesUrl)
         this.$set(this.info.indList,'title', file.name)
         this.$set(this.info.indList,'progress', this.info.indList.progress)
      },
      indDialog(){
          this.courseDialog = true
      },
      uploadSuccess({res,file,that}){
       this.info.fileList[this.actFileId].files = that.info.filesUrl
       this.info.fileList[this.actFileId].title = file.name
      // this.$set(this.info.fileList,'url',that.info.filesUrl})
      },
      next(){
        const indList = this.info.indList
         if(!indList.files) return this.$message.warning('请上传课件文件');
        this.courseDialog = false
        this.isPush = true
        this.info.fileList.push(indList)
        this.save()
      },

      save(fileList) {

        var that = this
        const tagList = []
        var id,indtagList,fileIds;
        if(fileList){
          //编辑
          id = fileList.id
          fileIds  = fileList.files|| ""
         indtagList = fileList.tagList
        }else{
         // 新增
          id = this.id
          fileIds = this.fileIds
         indtagList = this.info.indList.tagList
        }
         //整合所要保存的标签 分类
       
        const {improvementTagList,keyPointTagList} = this.getTagListSave(indtagList)
        const teachingDesignResId = this.teachingDesignResId //课时id
        let {teachingPlanId:teachingDesignId}  = this.$store.state.uploadLessonPlan

       // this.$set(this.info.template,'templateContentVOList',this.templatePlatform.templateContentVOList)

        var params = {
          id,
          fileIds,
          improvementTagList,
          keyPointTagList,
          teachingDesignId,
          teachingDesignResId,
        }
        // if(this.list.id) params.id = this.list.id
        console.log("partamd",this.info.fileList[this.info.fileList.length-1])
            //
        saveResCourseware(
          params
        ).then((res) => {
          if(res.data&&!id){

            this.$set(this.info.fileList[this.info.fileList.length-1],'id',res.data)

          }
          this.$message.success('保存成功！')
        })

      }
    }

  }
</script>
<style lang="scss">
  .courseDialogUpload{
    height:150px;width:150px;
    .el-upload--text{
      i{font-size: 50px;}
      // width: 100%;height:100%;
      }
  }
  .inpBarList {
    textarea {
      height: 300px;
    }
  }
</style>
<style lang="scss" scoped>
  .container {
   .courseWareList{
     border-top: 1px solid #d0d0d0;
     margin-bottom:10px;
     padding:15px 5px;
   }
   .listFilebox{
     margin:20px 0;
   }
    // padding: 24px;
    .modeBtn {
      .el-button {
        width: 320px;
        height: 80px;
        font-size: 14px;
        color: #000;
      }
    }
  }
</style>
